
<template>
  <div class="app-container">
    <main class="content">
      <router-view></router-view>
    </main>
      <LoadingOverlay ref="overlayRef" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import LoadingOverlay from './components/Loading.vue'


const overlayRef = ref(null)
const router = useRouter()

onMounted(() => {
  router.beforeEach((to, from, next) => {
    if (to.meta.needLoading) {
      overlayRef.value?.show()   // 只在需要的页面显示
    }
    next()
  })

  router.afterEach((to) => {
     const delay = Math.floor(Math.random() * 501) // 0 ~ 500 ms

     
    if (to.meta.needLoading) {
      setTimeout(() => {
        overlayRef.value?.hide()
      }, delay) // 给个延时避免闪烁
    }
  })
})

</script>


<style scoped>
.content {
  --webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar {
  display: none;
}
.app-container {
  --webkit-overflow-scrolling: touch;
}
.app-container::-webkit-scrollbar {
  display: none;
}
</style>
